<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue周末班</title>
    <style>
        .gren{
            background:#000;
            color:#fff;
        }
    </style>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <button 
            :class="{'gren': index == indexNum}" 
            v-for="item,index in data"
            @click="tab(index)"
        >{{item.title}}</button>
        <div 
            v-for="item,index in data"
            v-show="indexNum == index"
        >
            <p v-for="opthon in item.list">{{opthon.tile}}</p>
        </div>
    </div>
    <script>

        let data = [
            {
                title:'第一个',
                list:[
                    {
                        tile:'111111'
                    },
                    {
                        tile:'2222222'
                    },
                    {
                        tile:'33333333'
                    }
                ]
            },
            {
                title:'第二个',
                list:[
                    {
                        tile:'aaaaaaaa'
                    },
                    {
                        tile:'bbbbbb'
                    },
                    {
                        tile:'ccccccc'
                    }
                ]
            },
            {
                title:'第三个',
                list:[
                    {
                        tile:'uuuuuuuuu'
                    },
                    {
                        tile:'ttttttttt'
                    },
                    {
                        tile:'fffffffff'
                    }
                ]
            },
        ]

        let vm = new Vue({
            el:'#app',
            data:{   // 数据放到这里
                data,
                indexNum:0,
            },
            methods:{  //  模板里的方法， 统一定义在这里
                tab(id){
                    this.indexNum = id;
                },
            }

        })
    </script>
</body>
</html>